<template>
  <!-- 实时问答 -->
  <div class="box">
    <!-- banner -->
    <div class="banner">
      <!-- 搜索框 -->
      <div class="search_box">
        <p>一站式代码设计素材平台</p>
        <div class="input_div" style="visibility: hidden;">
          <input placeholder="请输入内容搜索" type="text" @blur="input_Bure()" @focus="input_Focus()">
          <div class="btn_s">
            <img src="../assets/header/fdj.png">
            搜索
          </div>
          <!-- 隐藏的搜索下拉 -->
          <div :class="{'addclass':search_show}" class="search_hot">
            <!-- 最近搜索 -->
            <div class="lately">
              <span>最近搜索:</span>
              <ul>
                <li>电商banner</li>
                <li>春天插画</li>
                <li>前端niubi</li>
              </ul>
            </div>
            <!-- 热搜榜 -->
            <ul class="Hot_search">
              <li v-for="(item,index) in Hot_list" :key="index">
                <div class="ranking">
                  <span :class="{'ranking_class':index<=2}">{{ index + 1 }}</span>
                  <span>{{ item.text }}</span>
                </div>
                <div class="result">
                  约{{ item.num }}结果
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 热搜词 -->
        <div class="Hot_wrods">
          <span>热搜词: </span>
          <ul>
            <li v-for="(item,index) in Hot_wrods" :key="index">
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- banner -->
    <!-- conten -->
    <div class="content max_width">
      <!-- 详情页组件!!!!!!!!!!!!!!!! -->
      <detalisNav :Lists="Left_nav" @info="show"></detalisNav>
      <!--  -->
      <div class="cont_wrapper">
        <!-- nav -->
        <div class="cont_nav">
          <div class="nav_div">
            <ul>
              <li>推荐</li>
              <li>关注</li>
              <li>
                <select class="select_div">
                  <option selected="selected">排序状态</option>
                  <option v-for="(item,index) in Cont_nav" :key="index" :value="item.id" v-text="item.name">
                  </option>
                </select>
              </li>
            </ul>
          </div>
          <!-- 搜索框 -->
          <div class="search_div">
            <img src="../assets/problem/fangdajing.png" @click="search_Change()">
            <input name="search" type="text" v-model="search_Text" @keyup.enter="search_Change()">
          </div>
        </div>
        <div class="cont_div">
          <div class="title">
            {{title_now.name}}
          </div>
          <!--  -->
          <div v-for="(item,index) in List" :key="index" class="div_option" @click="Change(item.id)">
            <div class="img_box">
              <img :src="item.image">
            </div>
            <div class="text_box">
              <p>{{ item.title }}</p>
              <p>{{ item.content}}</p>
              <div class="fun_box">
                <div>
                  <img src="../assets/Knowledege/dianzan.png">
                  {{ item.zan_num }}
                </div>
                <div>
                  <img src="../assets/Knowledege/xiaoxi.png">
                  {{ item.comment_num }}
                </div>
                <div class="time_box">
                  <div>
                    <img src="../assets/Knowledege/shoucang.png">
                    {{ item.cang_num }}
                  </div>

                  <div>
                   {{item.created_at}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 加载区域 -->
          <div class="Loading">
            加载更多&gt;&gt;
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { prolist,pSearch } from '@/api'
export default {
  data() {
    return {
      // 排序状态
      Cont_nav:[
          {name:'时间最早'},
          {name:'时间最晚'},
          {name:'点赞最多'},
      ],
      // 我的搜索内容
      search_Text:'',
      List: [],
      // banner数据
        Hot_list: [
                { text: "UI设计素材", num: "8,799" },
                { text: "春天", num: "8,799" },
                { text: "企业宣传", num: "8,799" },
                { text: "中国风背景", num: "8,799" },
                { text: "前端VUE", num: "8,799" },
                {
                    text:
                        "浏览器怪异模式和标准模式的区别在哪里，都来看看吧123456",
                    num: "8,799",
                },
            ],
            // 热搜词
            Hot_wrods: [
                { title: "片头" },
                { title: "中国风" },
                { title: "企业宣传" },
                { title: "字幕" },
                { title: "抖音" },
                { title: "快闪" },
                { title: "科技" },
                { title: "风景" },
            ],
            search_show: false,
            // 左边导航
            Left_nav:[],
            //
            title_now:{},
            // 导航传id
            cate_id:''
    }
  },
  created(){
    this.a()
  },
  methods:{
          // 子组件传导航id
          show(data){
            this.cate_id = data;
            this.a()
          },
            // 跳转详情
            Change(index){
                this.$router.push({path:'/Problem_details',query:{id:index}})
            },
             // 数据请求
           async a(){
             await prolist(this.cate_id).then((response)=>{
               this.List = response.data.data
               this.Left_nav = response.data.cate;
               this.title_now = response.data.cate_this;
                // console.log(response.data.cate_this.name)
             })
           },
          //  搜索
          async search_Change(){
           await pSearch(this.search_Text).then((response)=>{
             if(response.code == 200){
               alert(response.msg)
             }
           })
          }
        },

}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  //
  .content {
    margin: 18px auto;
    display: flex;
    justify-content: flex-start;
    height: auto;
    // .cont_wrapper{}
    // nav
    .cont_nav {
      width: 962px;
      line-height: 66px;
      background: #FFFFFF;
      box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      margin-left: 41px;
      margin-bottom: 17px;
      display: flex;
      align-content: center;
      justify-content: space-between;

      .nav_div {
        ul {
          display: flex;
          justify-content: space-around;
          width: 400px;
          align-items: center;
          li {
            cursor: pointer;
            font-size: 20px;
            color: #333333;
            cursor: pointer;
            .select_div {
              border: none;
              outline: none;
              font-size: 20px;
              cursor: pointer;
            }

          }
          li:hover{color: #ED9B5D;}

        }
      }

      .search_div {
        width: 181px;
        height: 32px !important;
        margin-right: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        line-height: 32px;
        background: #F7F8FA;
        border: 1px solid #E6E6E6;
        border-radius: 16px;

        img {
          width: 19px;
          height: 19px;
          margin-right: 5px;
          cursor: pointer;
        }

        input {
          width: 130px;
          background: #F7F8FA;
          border: none;
          outline: none;
        }
      }
    }

    .cont_div {
      width: 962px;
      background: #FFFFFF;
      box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      margin-left: 41px;

      .title {
        color: #333333;
        font-size: 28px;
        line-height: 48px;
        text-align: center;
        margin: 0 auto 45px;
        width: 864px;
        border-bottom: 1px #CCCCCC solid;
        padding: 60px 0 45px;
      }

      .div_option {
        width: 864px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px #CCCCCC solid;

        .img_box {
          width: 212px;
          height: 156px;
          // 图片自适应
          img{width: 100%;display: block;object-fit: cover;height: 100%;}
        }

        .img_box:hover {
          box-shadow: 0px 9px 18px 2px rgba(0, 0, 0, 0.2);
        }

        .text_box {
          width: 590px;

          p:first-child {
            font-size: 22px;
            color: #333333;
            line-height: 48px;
            cursor: pointer;
          }

          p {
            overflow: hidden;
            width: 598px;
            font-size: 18px;
            color: #999999;
            line-height: 26px;
            word-break: break-all;
            text-overflow: ellipsis; //超出本分显示...
            display: -webkit-box; //对象作为伸缩盒子模型显示
            -webkit-box-orient: vertical; //设置或检索伸缩盒子对象的子元素的排列方式
            -webkit-line-clamp: 2; //显示行数
            cursor: pointer;
          }

          .fun_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;

            div {
              display: flex;
              align-items: center;
              font-size: 16px;
              color: #666666;
              cursor: pointer;

              img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }
            }

            div:hover {
              color: #ED9B5D
            }

            .time_box {
              width: 282px;
              justify-content: space-between;
            }
          }
        }
      }

      // 取消下边框样式
      .div_option:last-child {
        border: none;
      }

      // 加载区域
      .Loading {
        padding: 55px 0;
        text-align: center;
        font-size: 24px;
        cursor:pointer;
      }
      .Loading:hover{
        color: #ED9B5D;
      }
    }
  }
}
.banner {
  width: 100%;
  position: relative;
  background: url("../assets/header/banner.png") no-repeat;
  height: 443px;
  // 搜索框
  .search_box {
    width: 690px;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%);
    // border:1px white solid;
    p {
      text-align: center;
    }

    p:first-child {
      font-size: 30px;
      color: #ffffff;
      line-height: 48px;
    }

    .input_div {
      margin: 0 auto;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 41px;
      position: relative;
      height: 60px;
      background: #ffffff;
      border-radius: 30px;

      input {
        font-size: 22px;
        width: 520px;
        border: none;
        outline: none;
      }

      .btn_s {
        width: 130px;
        background: #0bbed4;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        font-size: 21px;
        cursor: pointer;
        padding: 1px 0;

        img {
          width: 23px;
          height: 23px;
          margin-right: 9px;
        }
      }

      // 隐藏的搜索下拉
      .search_hot {
        transition: all 0.5s ease-in;
        overflow: hidden;
        width: 556px;
        height: 0px;
        background: white;
        position: absolute;
        top: 70px;
        left: 10px;
        border-radius: 5px;
        border: none;
        outline: none;

        .lately {
          line-height: 34px;
          background: #f1f1f1;
          font-size: 14px;
          padding: 0 10px;
          color: #333333;
          display: flex;

          ul {
            display: flex;

            li {
              margin-left: 35px;
            }
          }
        }

        .Hot_search {
          padding: 10px 10px;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 0;
            cursor: pointer;
            .ranking {
              display: flex;

              span:first-child {
                width: 22px;
                line-height: 22px;
                display: block;
                text-align: center;
                font-size: 11px;
                border-radius: 3px;
                background: #e6e6e6;
                border-radius: 3px;
                color: #33cfff;
              }

              span:last-child {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 250px;
                margin-left: 18px;
                font-size: 14px;
                color: #333333;
              }
            }

            // 前三名添加样式
            .ranking_class {
              background: #33cfff !important;
              color: #fff !important;
            }

            // 结果
            .result {
              color: #666666;
              font-size: 14px;
            }
          }
        }
      }

      // 显示过渡
      .addclass {
        height: 386px;
        border: 1px solid #33cfff;
      }
    }

    // 热搜词
    .Hot_wrods {
      width: 520px;
      display: flex;
      justify-content: center;
      color: white;
      font-size: 16px;
      text-align: center;
      margin: 30px auto;
      ul {
        display: flex;
        margin-left: 10px;

        li {
          margin-left: 5px;
          cursor: pointer;
        }

        li:hover {
          color: #F2F2F2;
        }
      }
    }
  }
}
</style>
